<template>
	<view class="page" >
		<view class="btnRow">
			<view class="text" @click="goBack">
				取消
			</view>
			<u-icon size="32" name="camera" color="#4089f0" @click="changePosition"></u-icon>
		</view>
		<view class="tips">
			 [ 请将人脸置于镜头中间，注意光线均匀 ]
		</view>
		<view class="content">
			<camera class="camera" v-if="!finish" :device-position="devicePositon"></camera>
			<image class="image" :src="image" v-else mode=""></image>
		</view>
		<view class="handleBtn">
		 	<view class="finishIcon" v-if="!finish" @click="takeImg">
		 		
		 	</view>
			<view class="btnRow" v-else>
				<u-icon size="32" color="#4089f0" name="close" @click="clearImg"></u-icon>
				<u-icon size="32" color="#4089f0" name="checkmark" @click="finishEnter"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				devicePositon: 'front',//front 前 back 后
				finish : false,
				image : ''
			}
		},
		methods: {
			takeImg(){
				this.finish = true
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
				    quality: 'high',
				    success: (res) => {
				        this.image = res.tempImagePath
						
						console.log(this.image);
				    }
				});
			},
			clearImg(){
				this.image = ''
				this.finish = false
			},
			changePosition(){
				if(this.devicePositon=='front'){
					this.devicePositon = 'back'
				}else{
					this.devicePositon = 'front'
				}
			},
			finishEnter(){
				console.log(this.image);
				let formData ={
					openId : uni.getStorageSync('openId')
				} 
				this.uploadFile('/SmartPortal/portal/validimg',this.image,formData,'file').then(res=>{
					let data = JSON.parse(res.data)
					console.log(data);
					if(data.data.code == 200){
						console.log('验证成功');
						this.setMessage('验证成功')
						uni.$emit('validimgEmit',{
							image : this.image
						})
						this.goBack()
					}else{
						this.setMessage(data.data.message)
						this.image = ''
						this.finish = false
					}
					console.log(data);
				})
			},
			
		},
		onLoad() {
			
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #fff;
	height: 100vh;
	@include flexColCenter;
	.btnRow{
		width: 100vw;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 34rpx;
		color: #606266;
	}
	
	.tips{
		margin:20rpx  auto;
	}
	.camera{
		margin-top: 50rpx;
		width: 420rpx;
		height: 420rpx;
		border-radius: 50%;
	}
	.image{
		width: 420rpx;
		height: 420rpx;
		margin-top: 50rpx;
		background-color: #4089f0;
	}
	.handleBtn{
		margin-bottom: 100rpx;
		.finishIcon{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			border: 4rpx solid #4089f0;
			position: relative;
			&:after{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				transform: translate(-50%,-50%);
				background-color: #4089f0;
			}
		}
	}
	.content{
		flex: 1;
	}
}
</style>
